<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <link rel="stylesheet" href="../../lib/css/bootstrap.min.css">
  <link rel="stylesheet" href="../../css/admin.css">
  <script src="../../lib/js/jquery.min.js"></script>
  <script src="../../lib/js/bootstrap.min.js"></script>
  <title>Title</title>
</head>
<body>
<div class="admin-item">
  <div class="container">
      <h2>幼儿园管理
        <span class="btn btn-info pull-right" data-toggle="modal" data-target="#exampleModal" data-type="add">添加</span>
      </h2>
      <div class="table-responsive table-item">
        <table class="table">
          <tr>
            <th>启用</th>
            <th>序号</th>
            <th>名称</th>
            <th>地址</th>
            <th>联系方式</th>
            <th>操作</th>
          </tr>
          <tr>
            <td><input type="checkbox"></td>
            <td class="num-item">1</td>
            <td class="tit-item">幼儿园1</td>
            <td class="info-item">某地方</td>
            <td class="info-item">12345678910</td>
            <td>
              <span class="btn btn-primary preview-btn">预览</span>
              <span class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-type="edit">编辑</span>
              <span class="btn btn-default delete-btn" data-toggle="modal" data-target="#delete-banner">删除</span>
            </td>
          </tr>
        </table>
      </div>
  </div>
  <!-- 弹窗 -->
  <div class="modal fade" id="exampleModal" tabindex="-1">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title">幼儿园</h4>
        </div>
        <div class="modal-body">
          <form>
            <div class="form-group">
              <label for="recipient-name" class="control-label">名称</label>
              <input type="text" class="form-control">
            </div>
            <div class="form-group">
              <label for="recipient-name" class="control-label">地址</label>
              <input type="text" class="form-control">
            </div>
            <div class="form-group">
              <label for="recipient-name" class="control-label">联系方式</label>
              <input type="text" class="form-control">
            </div>
            <div class="form-group">
              <label class="control-label">选择简介模板</label>
              <div class="btn-group">
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <span class="sel-item">模板1</span> <span class="caret"></span>
                </button>
                <ul class="dropdown-menu article-tpl-sel">
                  <li><a>模板1</a></li>
                  <li><a>模板2</a></li>
                </ul>
              </div>
            </div>
            <div class="article-tpl tplText">
              <div class="form-group">
                <label for="recipient-name" class="control-label">简介标题</label>
                <input type="text" class="form-control">
              </div>
              <div class="form-group">
                <label for="message-text" class="control-label">描述</label>
                <textarea class="form-control"></textarea>
              </div>
            </div>
            <div class="article-tpl tplTextImg">
              <div class="form-group">
                <label for="recipient-name" class="control-label">简介标题</label>
                <input type="text" class="form-control">
              </div>
              <h3>图片、文字
                  <span class="btn btn-info add-btn">添加</span>
              </h3>
              <div class="form-group">
                <input type="file" class="pull-left"><span class="pull-right btn btn-default delete-item">删除</span>
                <textarea class="form-control"></textarea>
              </div>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
          <button type="button" class="btn btn-primary btn-preview">预览</button>
          <button type="button" class="btn btn-primary save-btn">保存</button>
        </div>
      </div>
    </div>
  </div>
</div>
<script>
$(function () {
  'use strict';
  $('#exampleModal').on('show.bs.modal', function (event) {
    var button = $(event.relatedTarget)
    var modal = $(this)
    var preview = modal.find(".btn-preview")
    preview.off().on("click", function () {
      window.open('preview.html')
    })
  })
  // 删除
  $(".table-item").on("click", ".delete-btn", function () {
    if(confirm("是否确定删除")){
      $(this).parents("tr").remove();
    }
  })
  // 预览
  $(".table-item").on("click", ".preview-btn", function () {
    window.open('preview.html')
  })
  // 模板选择
  $(".article-tpl-sel li").on("click", function () {
    $(this).parents(".btn-group").find(".sel-item").text($(this).text());
    $(".article-tpl").hide().eq($(this).index()).show();
  })
  // 图片文字添加
  $(".tplTextImg .add-btn").on("click", function () {
    var item = '<div class="form-group"> <input type="file" class="pull-left"><span class="pull-right btn btn-default delete-item">删除</span> <textarea class="form-control"></textarea> </div>'
    $(".tplTextImg").append(item)
  })
  $(".tplTextImg").on("click", ".delete-item", function () {
    $(this).parents(".form-group").remove();
  })
})
</script>
</body>
</html>